<template>
  <div>
    <Header ref="headers" />
    <Form
      :picker-show="true"
      :add-click-show="false"
      :inp-show="false"
      :select-show="true"
      twoitem="合作商："
      treeitem="日期："
      :total-count="totalCount"
      :total-page="totalPage"
      :page-index="pageIndex"
      :search-list="reportList"
      :create-time="createTime"
      :option="ownerList"
      @changeList="changeList"
      @searchResultFn="searchResultFn"
    >
      <template #tableForm>
        <el-table-column prop="date" label="订单日期" />
        <el-table-column prop="ownerName" label="合作商" />
        <el-table-column prop="ratio" label="分成比例" />
        <el-table-column prop="orderTotalMoney" label="收入（元）" />
        <el-table-column prop="orderCount" label="笔数" />
        <el-table-column prop="totalBill" label="分成金额（元）" />
      </template>
      <template #resoultText>
        <div>
          <span class="title">笔数统计：<span class="value">{{ allCount }}</span>个</span>
          <span class="title">收入统计：<span class="value">{{ totlalAmount }}</span>元</span>
          <span class="title">分成统计：<span class="value">{{ totalBill }}</span>元</span>
        </div>
      </template>
    </Form>
  </div>
</template>

<script>
import Header from './children/header.vue'
import Form from '@/components/form'
import { partnerCollect, orderAmount, orderCout, totalBill, partnerSearch } from '@/api'
import { parseTime } from '@/utils'
export default {
  components: { Header, Form },
  data() {
    return {
      pageIndex: 1,
      createTime: { start: parseTime(new Date(), `{y}-${(new Date()).getMonth() + 1}-01`),
        end: parseTime(new Date(), '{y}-{m}-{d}') },
      reportList: [],
      totalPage: null,
      totalCount: null,
      allCount: null,
      totlalAmount: null,
      totalBill: null,
      ownerList: [],
      searchForm: null
    }
  },
  async created() {
    this.partnerFn(this.pageIndex, this.createTime)
    const res = await partnerSearch({
      pageIndex: 1,
      pageSize: 10000
    })
    res.data.currentPageRecords.forEach(item => {
      item.statusId = item.name
      item.statusName = item.name
    })
    this.ownerList = res.data.currentPageRecords
  },
  methods: {
    async partnerFn(pageIndex, obj) {
      // 列表
      const res = await partnerCollect({
        pageIndex,
        pageSize: 10,
        ...obj
      })
      console.log(res)
      res.data.currentPageRecords.forEach(item => {
        item.ratio = item.ratio + '%'
        item.orderTotalMoney = '+' + (item.orderTotalMoney / 100).toFixed(2)
        item.totalBill = '+' + (item.totalBill / 100).toFixed(2)
      })
      this.reportList = res.data.currentPageRecords
      this.totalPage = res.data.totalPage
      this.totalCount = res.data.totalCount
      // orderAmount, orderCout, totalBill
      console.log(obj)
      const objTime = {
        start: obj.start + ' 00:00:00',
        end: obj.end + ' 23:59:59'
      }
      this.allCount = (await orderCout(objTime)).data
      this.totlalAmount = ((await orderAmount(objTime)).data / 100).toFixed(2)
      this.totalBill = ((await totalBill(objTime)).data / 100).toFixed(2)
    },
    changeList(page) {
      this.pageIndex = page
      if (this.searchForm) {
        this.partnerFn(this.pageIndex, {
          partnerName: this.searchForm.statusId,
          start: this.searchForm.statusTime[0],
          end: this.searchForm.statusTime[1]
        })
      } else {
        this.partnerFn(this.pageIndex, this.createTime)
      }
    },
    searchResultFn(val) {
      this.searchForm = val
      this.partnerFn(1, {
        partnerName: val.statusId,
        start: val.statusTime[0],
        end: val.statusTime[1]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-right: 50px;
}

.value {
  font-size: 20px;
  color: #ff5757;
  font-weight: 500;
}
</style>
